<template>
    <div style="padding:30px 40px;">
        <a-form style="margin-top:30px;">
            <a-row :gutter="20">
                <!-- <a-col :span="4">
                    <a-form-item>
                        <a-input placeholder="商户单号" v-model="query.data.merchantOrderNo" />
                    </a-form-item>
                </a-col>
                <a-col :span="4" :offset='1' style="padding:0;">
                    <a-form-item>
                        <a-input placeholder="账户名称" v-model="query.data.mainMemberName" />
                    </a-form-item>
                </a-col>
                <a-col :span="4" :offset='1'>
                    <a-form-item>
                        <a-input placeholder="账号后四位" v-model="query.data.externalAccountNo" />
                    </a-form-item>
                </a-col> -->

                <a-col :span="4">
                    <a-form-item>
                        <a-select placeholder="交易状态" :options="statusList" v-model="query.data.status"></a-select>
                    </a-form-item>
                </a-col>
                <a-col :span="4" :offset='1' style="padding:0;">
                    <a-form-item>
                        <a-date-picker style="width:100%;" placeholder="交易时间" format="YYYYMMDD" @change="onChange"
                            v-model="momentDate" :allowClear="isClear" />
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row style="margin-bottom: 20px;">
                <a-col :span="9" :style="{ textAlign: 'left' }">
                    <a-row type="flex" justify="space-between">
                        <a-col :span="6">
                            <a-button class="button_sty" type="primary" :loading="loading" @click="handleSearch">查询
                            </a-button>
                        </a-col>
                        <a-col :span="6">
                            <a-button class="button_sty" type="primary" @click="reset">重置</a-button>
                        </a-col>
                        <a-col :span="6">
                            <a-button class="button_sty" type="primary" @click="conexport">导出</a-button>
                        </a-col>
                    </a-row>
                </a-col>
            </a-row>
        </a-form>
        <!-- <p>
            总计
            <span class="amountColor amountSize">{{count}}</span>笔 ，成功
            <span class="amountColor amountSize">{{payedCount}}</span>笔 ， 成功金额
            <span class="amountColor amountSize">{{(totalAmount/100).toFixed(2)}}</span>元
        </p> -->
        <a-table size="middle" :scroll="{ y: '38vh' }" :columns="columns2" :dataSource="list" :pagination="false"
            :rowKey="record => record.merchantOrderNo">
            <span slot="externalAccountNo" slot-scope="record">
                {{record | AccountNofilter}}
            </span>
            <span slot="transTime" slot-scope="record">
                {{record | timeFilter}}
            </span>
            <span slot="amount" slot-scope="record">
                {{(record/100).toFixed(2)}}
            </span>
            <span slot="feeAmount" slot-scope="record">
                {{(record/100).toFixed(2)}}
            </span>
        </a-table>
        <a-pagination @change="onPageChange" :current="pagination.current" :total="pagination.total"
            :pageSize="query.pageSize" style="margin-top: 10px" />
        <a-modal title="支付密码重置成功！" v-model="visible" :footer="null">
            <div style="text-align:center;">
                <a-button type="primary" @click="gologin">确定</a-button>
            </div>
        </a-modal>
    </div>
</template>

<script>
    import AForm from "ant-design-vue/es/form/Form";
    import ATabs from "ant-design-vue/es/tabs";

    import AFormItem from "ant-design-vue/es/form/FormItem";
    import AInput from "ant-design-vue/es/input/Input";
    import AIcon from "ant-design-vue/es/icon";
    import AInputGroup from "ant-design-vue/es/input/Group";
    import AButton from "ant-design-vue/es/button/button";
    import ACol from "ant-design-vue/es/grid/Col";
    import ARow from "ant-design-vue/es/grid/Row";
    import ACheckbox from "ant-design-vue/es/checkbox/Checkbox";
    import AAlert from "ant-design-vue/es/alert/index";
    import moment from "moment";
    import api from "@/common/api";
    const ATabPane = ATabs.TabPane;

    const columns2 = [
        { title: "交易日期", dataIndex: "transDate", width: '10%', align: 'center' },
        { title: "交易时间", dataIndex: "transTime", scopedSlots: { customRender: "transTime" }, width: '10%', align: 'center' },
        { title: "卡号", dataIndex: "externalAccountNo", scopedSlots: { customRender: "externalAccountNo" }, width: '20%', align: 'center' },
        { title: "交易单号", dataIndex: "transOrderNo", width: '20%', align: 'center' },
        // { title: "账户名称", dataIndex: "mainMemberName", width: '10%',align:'center' },
        { title: "交易金额(元)", dataIndex: "amount", scopedSlots: { customRender: "amount" }, width: '15%', align: 'center' },
        { title: "提现手续费(元)", dataIndex: "feeAmount", scopedSlots: { customRender: "feeAmount" }, width: '15%', align: 'center' },
        { title: "交易状态", dataIndex: "statusName", width: '15%', align: 'center' }
    ];

    export default {
        name: "提现明细查询",
        components: {
            AAlert,
            ACheckbox,
            ACol,
            ARow,
            AButton,
            AInputGroup,
            AIcon,
            AInput,
            AFormItem,
            ATabPane,
            ATabs,
            AForm
        },
        filters: {
            nameFilter(value) {
                if (value) {
                    return '*' + value.substring(1, value.length)
                }
                return ''
            },
            phoneFilter(value) {
                if (value) {
                    return value.substring(0, 3) + '****' + value.substring(7, value.length)
                }
                return ''
            },

            timeFilter: function (value) {
                if (value) {
                    let year = value.substring(0, 2)
                    let mouth = value.substring(2, 4)
                    let day = value.substring(4, 6)
                    return year + ':' + mouth + ':' + day;
                }
            },
            AccountNofilter(value) {
                if (value) {
                    var reg = /.*(.{4})$/;
                    return value.replace(reg, "**** **** **** ***$1");
                }
            },
            cashfilter(value) {
                return parseFloat(value / 100).toFixed(2) + '元';
            }
        },
        data() {
            return {
                today: new Date(),
                list: [],
                momentDate: moment(new Date()),
                statusList: [
                    { label: "全部", value: "all" },
                    { label: "下单中", value: "ordering" },
                    { label: "待支付", value: "ordered" },
                    { label: "交易成功", value: "payed" },
                    { label: "提现失败", value: "failed" },
                    { label: "状态不明", value: "notconfirmed" }
                ],
                columns2,
                isClear: false,
                query: {
                    data: {
                        status: "all",
                        transDate: ""
                    },
                    page: 1,
                    pageSize: 10
                },
                pagination: { current: null, total: null },
                visible: false,
                form: this.$form.createForm(this),
                error: "",
                loginpwd: "",
                loginpwd2: "",
                login: false,
                count: null,
                payedCount: null,
                totalAmount: null,
                loading: false,
                pagination: { current: null, total: null },
                visible: false,
                form: this.$form.createForm(this),
                error: "",
                loginpwd: "",
                loginpwd2: "",
                login: false,
                count: null,
                payedCount: null,
                totalAmount: null,
                formItemLayout: {
                    labelCol: {
                        xs: { span: 24 },
                        sm: { span: 6 }
                    },
                    wrapperCol: {
                        xs: { span: 24 },
                        sm: { span: 18 },
                        md: { span: 18 }
                    }
                }
            };
        },
        watch: {},
        computed: {},
        mounted() {
            this.handleSearch();
            // this.statusQuery();
            var date = new Date();
            var month = date.getMonth();
            var dates = date.getDate();

            if (date.getMonth() < 9) {
                month = "0" + parseInt(month + 1);
            } else {
                month = month + 1;
            }
            if (date.getDate() <= 9) {
                dates = "0" + date.getDate();
            }
            this.query.data.transDate = date.getFullYear() + "" + month + "" + dates;
        },
        methods: {
            moment,
            onChange(dates, dateStrings) {
                this.query.data.transDate = dateStrings;
            },
            onPageChange: function (page, pageSize) {
                console.info(page, pageSize);
                this.query.page = page;
                this.query.pageSize = pageSize;
                this.handleSearch();
            },
            reset() {
                this.today = new Date();
                this.query.data = {};
                var date = new Date();
                this.momentDate = moment(date);
                var month = date.getMonth();
                var dates = date.getDate();
                if (date.getMonth() < 9) {
                    month = "0" + parseInt(month + 1);
                } else {
                    month = month + 1;
                }
                if (date.getDate() <= 9) {
                    dates = "0" + date.getDate();
                }
                this.query.data.transDate = date.getFullYear() + "" + month + "" + dates;
            },
            conexport() {
                console.info(this.query.data);
                this.$axios
                    .post("/agent/transaction/ExportQueryWithdraw", this.query.data)
                    .then(res => {
                        let token = localStorage.getItem("token");
                        let downloadUrl =
                            "/agent/transaction/excelDownloadWithdraw?Authorization=" +
                            token;
                        location.href = downloadUrl;
                    });
            },
            callback() { },
            handleSearch() {
                this.loading = true;
                console.info(this.query);
                api.coustromWithdraw(this.query, res => {
                    console.info(res);
                    if (res.code == "OK") {
                        this.loading = false;
                        this.list = res.list;
                        for (var idx in this.list) {
                            this.list[idx].externalFields = JSON.parse(
                                this.list[idx].externalFields
                            );
                        }
                        this.pagination.current = res.current;
                        this.pagination.total = res.total;
                        // this.count = res.count; //总笔数
                        // this.payedCount = res.payedCount; //成功笔数
                        // this.totalAmount = res.totalAmount; //总金额
                    } else {
                        this.loading = false;
                        // this.$message.info(res.message)
                        this.list = [];
                        return false;
                    }
                    this.pagination.current = res.data.current;
                    this.pagination.total = res.data.total;
                    this.count = res.data.count; //总笔数
                    this.payedCount = res.data.payedCount; //成功笔数
                    this.totalAmount = res.data.totalAmount; //总金额
                });
                // handleChange(value) {
                //   console.log(value);
                // },
            },
            gologin() {
                this.visible = false;
                this.$router.push("/home");
            },
            //交易状态查询
            statusQuery() {
                let data = {
                    groupCode:"posp_trans_status"
                }
                api.statusQuery(data, res => {
                    console.log(res)
                    if (res.code == "OK") {
                        let statusList = res.list;
                        this.statusList = [
                            { value: "all", label: "全部" }
                        ]
                        statusList.forEach((item, index) => {
                            let itemList = {
                                value: item.value,
                                label: item.label
                            }
                            this.statusList.push(itemList)
                        })
                    } else {

                    }
                }, err => {

                })
            },
        }
    };
</script>

<style lang="less" scoped>
    span {
        cursor: pointer;
    }

    .formGroupTitle {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 20px;
    }

    .ant-tabs-nav {
        float: right;
    }

    .amountColor {
        color: #29a576;
        font-weight: 400;
    }

    .amountSize {
        font-size: 20px;
        padding: 0 5px;
    }

    .expand {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .button_sty {
        width: 100%;
    }
</style>